<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片组件 -->
      <el-card class="box-card">
        <!-- 布局 -->
        <el-row>
          <el-col :span="18">
            <!-- 表单内容 -->
            <el-form
              :inline="true"
              ref="form"
              :model="formData"
              label-width="80px"
            >
              <el-form-item label="关键字">
                <el-input class="input" v-model="formData.keyword"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formData.state" placeholder="请选择">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="resetInput">清除</el-button>
                <el-button type="primary" @click="searchBtn">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-button type="success" icon="el-icon-edit" @click="addArticles"
              >新增技巧</el-button
            >
          </el-col>
        </el-row>
        <!-- 消息提示 -->
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          show-icon
          style="margin-bottom:10px"
        >
        </el-alert>
        <!-- 使用 Table 组件实现用户角色的渲染 -->
        <div class="table">
          <el-table :data="articlesList" style="width:100%">
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column  label="文章标题" width="300">
              <template slot-scope="scope">
                {{scope.row.title}}
                <!-- 设置图标 视频  根据数据里的video属性进行展示图标-->
                <i @click="video(scope.row.videoURL)" v-if="scope.row.videoURL" class="fa fa-film" aria-hidden="true"></i>
              </template>
            </el-table-column>
            <el-table-column prop="visits" label="阅读数" width="300">
            </el-table-column>
            <el-table-column prop="username" label="录入人" width="300">
            </el-table-column>
            <el-table-column label="录入时间" width="300">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | formatTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100px">
              <template slot-scope="scope">
                {{ scope.row.state == 1 ? "已启用" : "已禁用" }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="previewArticle(scope.row)" >预览</el-button>
                <el-button type="text" @click="disableArticle(scope.row)">{{
                  scope.row.state === 1 ? "禁用" : "启用"}}</el-button>
                <el-button type="text" :disabled="scope.row.state === 1" @click="reviseArticle(scope.row)">修改</el-button >
                <el-button type="text" :disabled="scope.row.state === 1" @click="delArticle(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页区域 -->
          <el-pagination
           background
            class="pagination"
            :current-page="query.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="query.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      <!-- 新增文章弹框 -->
      <el-dialog   title="提示" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
        <!-- 表单 -->
        <el-form ref="form"  :rules="rules" :model="articlesForm" label-width="80px">
          <el-form-item label="文章标题" class="elform" prop="title">
            <el-input v-model="articlesForm.title" placeholder="请输入文章内容"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" class="elform" prop="articleBody">
            <quill-editor style="margin-left: 0px; " v-model="articlesForm.articleBody" ref="myQuillEditor"> </quill-editor>
          </el-form-item>
             <el-form-item label="视频地址" class="elform">
             <el-input v-model="articlesForm.videoURL" placeholder="请输入视频地址"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="  dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addArticle" >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 预览文章弹框 -->
        <el-dialog title="预览文章" :visible.sync="previewDialogVisible" width="43%" >
               <!-- 主体区域 -->

                <!-- 标题 -->
                 <div class="articelTitle">
                   <h1>{{articlesInfo.title}}</h1>
                   </div>
                 <!-- 导航 -->
                 <div class="articleNav">
                      <span>{{articlesInfo.createTime|formatTime}}</span>
                       <span>{{articlesInfo.username}}</span>
                       <span><i  class="el-icon-view"></i></span>
                       <span>{{articlesInfo.visits}}</span>

                 <!-- 末尾 -->
                 <div class="artivcleFooter" v-html="articlesInfo.articleBody"></div>

             </div>
        </el-dialog>
        <!-- 视频区域 -->
        <div class="video" v-if="videoURL">
            <div @click="closeVideo()" class="videoIcon"><span class="el-icon-close"></span></div>
           <div class="videobox">
             <video autoplay :src="videoURL"></video>
           </div>
        </div>
    </div>
  </div>
</template>

<script>
// 导入api
import { list, changeState, add, remove, update, detail } from '@/api/hmmm/articles.js'
import dayjs from 'dayjs'
// 引用富文本
import { quillEditor } from 'vue-quill-editor'
// 引用样式
import 'quill/dist/quill.snow.css'
export default {
  name: 'articles',
  // 局部挂载
  components: {
    quillEditor
  },
  // 过滤器
  filters: {
    // 格式化入职日期的方法
    // ada
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data () {
    return {
      videoURL: null, // 视频地址
      formData: {
        keyword: '', // 关键字
        state: null // 状态
      },
      query: {
        page: 1, // 当前页面
        pagesize: 10 // 页面显示的条数
      },
      articlesList: [], // 文章列表
      total: 0, // 角色数据总条数
      dialogVisible: false, // 新增文章弹框
      articlesForm: {
        title: '', // 文章标题
        articleBody: '', // 文章正文
        videoURL: null, // 文章视频
        id: ''
      },
      articlesInfo: [], // 预览的数据
      previewDialogVisible: false, // 预览文章弹框
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      isEdit: false// 是否是编辑功能
    }
  },
  created () {
    // 调用获取数据的方法
    this.getArticles()
  },
  methods: {
    // 重置表单
    closeDialog () {
      // 把表单数据重置
      this.$refs.form.resetFields()
      this.articlesForm = {
        title: '', // 文章标题
        articleBody: '', // 文章正文
        videoURL: null // 文章视频
      }
    },

    // 在视频播放完之后才能启动关闭按钮
    closeVideo () {
      this.videoURL = null
    },

    // 把后端返回的数据 带有视频  返回给页面属性 然后把数据展示到页面上
    video (video) {
      this.videoURL = video
    },

    // s搜索按钮
    searchBtn () {
      this.query.page = 1
      this.getArticles()
    },

    // 新增按钮
    addArticles () {
      this.isEdit = false
      this.dialogVisible = true
    },

    // 修改文章并把数据回显
    async reviseArticle (row) {
      this.isEdit = true
      // 把需要的  数据传递给属性
      const res = await detail(row)
      this.articlesForm = res.data
      // 打开对话框
      this.dialogVisible = true
    },

    // 清除按钮
    resetInput () {
      // 把里面的数据重新还原
      this.formData = {
        keyword: '', // 关键字
        state: null // 状态
      }
      // 刷新页面
      this.getArticles()
    },

    // 删除功能
    async delArticle (row) {
      // 删除对话框
      const delRels = await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 用户按了取消 给用户提示
      if (delRels === 'cancel') return this.$message.info('你取消了删除!')
      // 调用接口
      await remove(row)
      //  如果整条数据就只有一条那么就  就把页码--1
      if (this.articlesList.length === 1) {
        this.query.page--
        // 如果是当前页码<=1了那么就把页码弄成1
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }
      //  给用户提示
      this.$message.success('删除文章成功!')
      // 重新获取数据
      this.getArticles()
      // 关闭弹窗
      this.dialogVisible = false
    },

    // 点击添加添加请求
    async addArticle () {
      // 表单校验
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        // 判断是不是编辑
        if (this.isEdit) {
          // 调用接口
          await update(this.articlesForm)
          // 给用户提示
          this.$message.success('修改文章成功')
        } else {
          // 调用接口
          await add(this.articlesForm)
          // 给用户提示
          this.$message.success('新增文章成功')
        }
        // 刷新页面
        this.getArticles()
        // 关闭弹窗
        this.dialogVisible = false
      })
      // 调用接口
      // const res = await add(this.articlesForm)
      // console.log(res)
    },

    // 预览功能
    previewArticle (row) {
      this.articlesInfo = row
      this.previewDialogVisible = true
    },

    // 禁用功能
    // 校验规则
    // 规则校验
    async disableArticle (row) {
      // 把自身的状态如果是1就改成0传给后端
      await changeState({ id: row.id, state: row.state === 1 ? 0 : 1 })
      // 如果手动修改 1就把他改成禁用状态
      row.state = row.state === 1 ? 0 : 1
      // 给用户提示
      this.$message.success('操作成功')
    },

    // 获取列表数据
    async getArticles () {
      // 调用接口
      const res = await list({ ...this.query, ...this.formData })
      // 、把数据重新给属性 渲染页面
      this.articlesList = res.data.items
      this.total = res.data.counts
    },

    // 每页显示的条数发生改变时触发
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.getArticles()
    },

    // 当前页面发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getArticles()
    }
  }
}
</script>

<style scoped>
.el-col.el-col-6 {
  text-align: right;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
::v-deeep.elform{
  width: 100%;
margin-bottom: 10px;
}
::v-deep .ql-editor{
  height: 200px;
}
::v-deep .artivcleFooter{
   margin-top: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    border-top: 1px dashed #ccc;
}
::v-deep .articleNav span{
  margin-left: 10px;
  margin-bottom:10px
}
i.fa.fa-film {
    color: #00f;
}
.video{
position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
}
.videoIcon{
    width: 50px;
    height: 50px;
  line-height: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    left: 50%;
    top: 30px;
    transform: translate(-50%);
    border-radius:50% ;
    text-align: center;
    position: absolute;
    color: #fff;
    font-size: 20px;

   }
  .videobox{
   position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);

    }

    video{
      width: 900px;
    height: 700px;}
</style>
